<template>
	<view>
		<view class="view-passWord">
			<text class="password" style="color: blue;font-size: 8px;">为了确保你的账号安全请验证手机号</text>
		</view>
		<view v-model="loginFrom">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" ref='myForm' :model="loginFrom">
				<u-form-item label="" prop="phone" borderBottom  style="width: 350px;margin-left:30px;margin-top:20px">
					<u--input v-model="loginFrom.phone" border="none" placeholder="请输入您的手机号">
					</u--input>
				</u-form-item>
			</u--form>
			<view class="uni-verification">
				<input class="uni-codeInput" type="text" v-model="loginFrom.code" placeholder="输入验证码" />
				<view class="sendCodeBtn" @click="sendCodeBtn">
					{{send?'发送验证码':second+'s重新发送'}}
				</view>
			</view>
		</view>
		<view>
			<u-button type="primary" class="login-button" @click="nextStep">下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入正确的手机号!'))
			}
			return {
				s: 60,	//默认倒计时
				second: 0,
				send: true, //按钮可以点击
				// 按钮里显示的文字
				content: '发送验证', 
				// 添加canClick
				canClick: true,
				// 登录输入框集合
				loginFrom:{
					// 用户手机号
					phone:'',
					// 验证码
					code:'',
				},
				// 自定义校验规则
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			// 跳转修改手机号页面
			nextStep(){
				if(this.loginFrom.code !== ''){
					uni.navigateTo({
						url: '/pages/personal/update-phone'
					})
				}
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
			// 向手机发送验证码
			SendVerificationByPhone(){
				this.$myRequest({
					url: '/eat-service/shortMessage/SendVerificationByPhone',
					data: {
						phone: this.loginFrom.phone,
					}
				}).then(res => {
					if (res.data.code === '999') {
					}
				})
			},
			// 发送验证码倒计时
			sendCodeBtn: function() {
				this.SendVerificationByPhone()
				let that = this;
				// 防止多次重复点击
				if(!that.send){
					return false;
				}
				// 发送验证码
				that.send = false;
				uni.showToast({
					title:'发送成功',
					icon:'none',
					success: () => {
						this.time();	// 倒计时
					}
				})
			},
			// 倒计时
			time(){
				let that = this;
				that.second = that.s;
				let interval = setInterval(function(){
					if(that.second == 1){
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					}else {
					console.log(that.second)
						that.second--;
					}
				},1000)
			},
		}
	}
</script>
	
<style scoped>
	.uni-verification{
		margin: 0 auto;
		width: 350px;
		margin-top: 40px;
		
	}
	.sendCodeBtn{
		margin-left: 250px;
	}
	.disabled{
		background-color: #ddd;
		border-color: #ddd;
		color:#57a3f3;
		cursor: not-allowed;
	}
	.uni-button{
		float: left;
		margin-left: 250px;
	}
	.uni-codeInput{
		float: left;
		border-bottom: 1px solid #d1d1d1;
	}
	.uni-code{
		width: 250px;
		margin-top: 50px;
		border-bottom: 1px solid #d1d1d1;
	}
	.login-button{
		margin-top: 50px;
		width: 350px;
	}
	.view-passWord{
		margin-top: 60px;
		margin-left: 30px;
	}
	.password{
		font-size: 20px;
	}
	.uni-input{
		width: 350px;
		margin: 0 auto;
		margin-top: 50px;
		border-bottom: 1px solid #d1d1d1;
	}
</style>
